<template>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="title" :label="detail.title" min-width="180" />
      <el-table-column prop="desc" label="描述" min-width="180" />
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="updateClick(scope.row.id, scope.row.title)"
            >配置</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="updateVisible"
      :title="updateTitle"
      @close="close()"
      width="800px"
      top="100px"
    >
      <basicUpdateForm
        ref="basicUpdateFormRef"
        :isModal="true"
        @close="close"
      ></basicUpdateForm>
    </el-dialog>
  </template>
  <script lang="ts">
  export default {
    name: "basicTypeList",
  };
  </script>
  <script lang="ts" setup>
  import { ref, getCurrentInstance, nextTick } from "vue";
  import type { FormInstance } from "element-plus";
  import basicUpdateForm from "@/components/basic/update-form.vue";
  
  const props = withDefaults(
    defineProps<{
      detail?: any;
      list?: any;
    }>(),
    {
      detail: {},
      list: [],
    }
  );
  
  const { proxy } = getCurrentInstance() as any;
  
  const basicUpdateFormRef = ref<HTMLElement>();
  
  const updateVisible = ref<boolean>(false);
  
  const updateTitle = ref<string>("");
  
  const updateClick = (id: number, title: string) => {
    updateTitle.value = title;
    updateVisible.value = true;
    nextTick(() => {
      proxy?.$refs["basicUpdateFormRef"]?.toInit(id);
    });
  };
  
  const close = () => {
      updateTitle.value = '';
      updateVisible.value = false;
  };
  </script>
  